<template>
  <div class="page-container">
    <el-row>
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>走过的城市</span>
          </div>
          <div v-for="(item, o) in cityList" :key="o" class="text item">
            {{ item }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">2</el-col>
      <el-col :span="12">3</el-col>
      <el-col :span="12">4</el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      cityList: [],
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      const list = require('@/assets/travelList/travelCity.json')
      console.log(list)
      this.cityList = list.data.cityList
    },
  },
}
</script>

<style lang="scss" scoped>
.page-container {
  width: 80%;
  margin: auto;
  margin-top: 30px;
}
</style>
